<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue2.0版本 -->
    <script src="../js/vue.js"></script>
    <title>初始vue</title>
</head>
<!-- 
   如果不是脚手架直接搭建的项目，如果讲vue用起来，不是new一个vue就好，因为创建普通项目没有vue.js包，而且html中也没有引入，所以没有vue的构造函数，根本用不了vue

    三步走：
            1.下载开发版本的vue.js，并通过script引入到html页面中(这样可以运行，但是控制台有两个提示：(1)请你下载vue的开发工具，达到更好的体验 (2)你正在运行开发者版本的vue，请你确信在生产过程中不要这样做)
            2.下载vue Devtools 然后在chrome中配置扩展工具即可（解决提示1）
            3.配置Vue.config.productionTip为false（设置为false，以阻止vue在启动时生成生产提示）（解决提示2）

            小提示： ctrl+刷新==强制刷新，和普通刷新不一样  

    初始Vue: 
    
            1.想让vue工作,就必须创建一个实例,且要传入一个配置对象
            2.root容器代码依然符合html规范,只不过混入了一些特殊的vue语法
            3.root容器里的代码被称为[Vue模板]
            4.Vue实例和容器是一一对应的
            5.真实开发中只有一个Vue实例,并且会配合着组件一起使用
            6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性  ({{}}叫做插值语法)
            7.一旦data中的数据发生改变,那么页面中所用到该数据的地方也会自动更新

            注意区分:js表达式 和js代码(语句)
                1.表达式:一个表达式会产生一个值,可以放在任何一个需要值得地方
                        (1). a
                        (2). a+b 加法运算表达式
                        (3). demo(1)
                        (4). x === y ? 'a' : 'b'
                    以上有一个特点我们在左侧定义一个变量,右边的这些表达式都能赋值
                2.js代码(语句)
                        (1). if(){}
                        (2). for(){}
 
-->

<body>

    <div id="root">
        <h1>hello{{name}}</h1>

    </div>

    <div>
        {{name}}
        <!-- 显示不出来,因为没有和vue关联起来,所以不是vue模板,使用不了vue的特殊语法 -->
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        // 创建vue实例并传入一个配置对象
        const x = new Vue({
            el: '#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css字符串选择器(一般用id，当然class也可以，只不过改为.root)
            // el：document.getElementByld('root') //也可以，但是不推荐，这个是直接找到这个元素给vue了，而上边是给一个标识让vue实例自己去找
            data: {
                name: '张名师'
            }
        })
    </script>
</body>


</html>